<script lang="ts">
	import type { PageData } from './$types'
	import { goto } from '$app/navigation'
	import { Pane, Splitpanes } from 'svelte-splitpanes'

	import { Tabs, TabItem, A } from 'flowbite-svelte'
	import {
		UserCircleSolid,
		GridSolid,
		AdjustmentsVerticalSolid,
		ClipboardSolid,
	} from 'flowbite-svelte-icons'
	import { formatDate } from '$lib'

	export let data: PageData

	let hoveredRowIndex: number | null = null

	function handleRowHover(index: number) {
		hoveredRowIndex = index
	}

	function handleRowUnhover() {
		hoveredRowIndex = null
	}
</script>

<div class="bg-gray-200 w-full h-svh overflow-y-auto">
	<Tabs style="underline" contentClass="p-0 bg-gray-50  dark:bg-gray-800 mt-0">
		<TabItem open>
			<div slot="title" class="flex items-center gap-2">
				<UserCircleSolid size="sm" />
				All Positions
			</div>

			<Splitpanes>
				<Pane size={70}>
					<Splitpanes pushOtherPanes={false} horizontal={true}>
						<Pane size={40}>
							<div class="bg-blue-400">持仓信息（从～交易软件APP～同步过来）</div>
							<div class="overflow-auto w-full h-full flex flex-col">
								<table class="w-full h-full">
									<thead>
										<tr
											class="bg-gray-400 text-left text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
										>
											<th class="text-nowrap">证券编号</th>
											<th class="text-nowrap">证券名称</th>
											<th class="text-nowrap">最新价</th>
											<th class="text-nowrap">涨跌幅</th>
											<th class="text-nowrap">涨跌额</th>
											<th class="text-nowrap">换手率</th>

											<th class="text-nowrap">持仓量</th>
											<th class="text-nowrap">持仓金额￥ </th>
											<th class="text-nowrap">持仓盈亏金额</th>
											<th class="text-nowrap">持仓盈亏比</th>

											<th class="text-nowrap">止损价</th>
											<th class="text-nowrap">止盈价</th>

											<th class="text-nowrap">TBots</th>
										</tr>
									</thead>
									<tbody class="divide-y divide-slate-200">
										{#each data.stocks as stock, index (stock.id)}
											<tr
												class="divide-x divide-slate-200 {index % 2 === 0
													? ''
													: 'bg-gray-100'} {hoveredRowIndex === index ? 'bg-green-400' : ''}"
												tabindex={index}
												on:mouseover={() => handleRowHover(index)}
												on:focus={() => handleRowHover(index)}
												on:mouseout={() => handleRowUnhover()}
												on:blur={() => handleRowUnhover()}
												on:click|preventDefault={() =>
													console.log('show transactions ' + `${stock.code}`)}
											>
												<td class="text-nowrap whitespace-nowrap">{stock.code}</td>
												<td class="text-nowrap whitespace-nowrap">{stock.name}</td>
												<td class="text-nowrap whitespace-nowrap">{stock.latestPrice}</td>
												<td class="text-nowrap whitespace-nowrap">{stock.changePercent}</td>
												<td class="text-nowrap whitespace-nowrap">{stock.changeAmount}</td>
												<td class="text-nowrap whitespace-nowrap">{stock.amplitude}</td>

												<td>{stock.volume}</td>
												<td>{stock.turnover}</td>
												<td>{stock.peRatio}</td>
												<td>{stock.pbRatio}%</td>

												<td>{stock.quantGrade}</td>
												<td>{stock.quantGrade}</td>
												<td>3</td>
											</tr>
										{/each}
										<tr><td colspan="13">Bottom Line</td></tr>
									</tbody>
								</table>
							</div>
						</Pane>
						<Pane size={60}>
							<div class="bg-orange-400 flex-grow-0">
								交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
							</div>

							<div class="overflow-auto w-full h-full flex flex-col">
								<Tabs
									tabStyle="full"
									class="flex "
									activeClasses="px-1 pt-1 pb-2 text-primary-600 bg-gray-100  dark:bg-gray-800 dark:text-primary-500"
									inactiveClasses="px-1 pt-1 pb-2 text-gray-500  hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
									contentClass="p-0 bg-gray-50  dark:bg-gray-800"
								>
									<TabItem title="5分钟线指令" open>
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">5分钟线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											<table class="w-full h-full">
												<thead>
													<tr
														class="bg-gray-400 text-left text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
													>
														<th>证券编号</th>
														<th>证券名称</th>
														<th>策略编号</th>
														<th>策略名称</th>
														<th>策略K线</th>
														<th>指令类型</th>
														<th>指令数量</th>
														<th>指令价格</th>
														<th>指令时间</th>
														<th>指令确认</th>
													</tr>
												</thead>
												<tbody class="divide-y divide-slate-200">
													{#each Array.from({ length: 130 }, (_, i) => i) as number}
														<tr class="hover:bg-green-400">
															<td>SH.KZZ.00{number}</td>
															<td>security name {number}</td>
															<td>策略{number}</td>
															<td>策略name {number}</td>
															<td>日K线</td>
															<td>买入/卖出</td>
															<td>100</td><td>20.8/市价</td>
															<td>3分钟前</td>
															{#if number % 3 == 0}
																<td class="text-red-400">手工</td>
															{:else}
																<td>自动</td>
															{/if}
														</tr>
													{/each}
													<tr><td colspan="9">Bottom Line</td></tr>
												</tbody>
											</table>
										</div>
									</TabItem>
									<TabItem title="15分钟线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">15分钟线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											15分钟
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>

									<TabItem title="30分钟线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">30分钟线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											30分钟
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>

									<TabItem title="60分钟线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">60分钟线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											60分钟线
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>

									<TabItem title="日线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">日线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											日线
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>

									<TabItem title="周线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">周线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											周线
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>

									<TabItem title="月线指令">
										<div slot="title" class="flex-none flex items-center">
											<UserCircleSolid size="sm" />
											<button tabindex="0">月线指令</button>
										</div>
										<div class="flex flex-col w-full h-full relative overflow-x-auto">
											月线
											交易指令（由在运行机器人监控K线数据生成TradeOrder，～指令代理FUDAPP～接收后在～交易软件APP～下单）
										</div>
									</TabItem>
								</Tabs>
							</div>
						</Pane>
					</Splitpanes>
				</Pane>

				<Pane size={30}>
					<div class="bg-blue-400">成交记录（从～交易软件APP～同步过来）</div>
					<div class="overflow-auto w-full h-full flex flex-col">
						<table class="w-full h-full border-collapse">
							<thead class="bg-gray-100">
								<tr
									class="bg-gray-400 text-left text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
								>
									<th>#</th>
									<th>交易时间</th>
									<th>成交数量</th>
									<th>成交价格</th>
									<th>成交方式</th>
								</tr>
							</thead>
							<tbody class="bg-white divide-y divide-gray-200">
								{#each data.transactions as transaction, index (transaction.id)}
									<tr class="divide-x divide-slate-200 hover:bg-green-400 focus-within:bg-gray-100">
										<td>
											{index}
										</td>
										<td>
											{formatDate(transaction.date)}
										</td>
										<td>
											{transaction.quantity}
										</td>
										<td>
											{transaction.price}
										</td>
										<td> 买入/卖出 </td>
									</tr>
								{/each}
								<tr><td colspan="5">Bottom Line</td></tr>
							</tbody>
						</table>
					</div>
				</Pane>
			</Splitpanes>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Stocks
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Stocks:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Etfs
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Etfs:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Open Funds
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Open Funds:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Convertible Bonds
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Convertible Bonds:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
	</Tabs>
</div>
